<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>优化橱窗</title>
		<link href="css/mycss.css" rel="stylesheet" type="text/css">
		<link href="css/pagination.css" rel="stylesheet" type="text/css">
		<link href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/??base-min.css,badges-min.css,forms-min.css,icons-min.css,labels-min.css,tables-min.css" rel="stylesheet" type="text/css">
		<link href="http://a.tbcdn.cn/s/kissy/1.3.0/??button/assets/dpl-min.css,calendar/assets/dpl-min.css,menu/assets/dpl-min.css,combobox/assets/dpl-min.css,menubutton/assets/dpl-min.css,overlay/assets/dpl-min.css,split-button/assets/dpl-min.css,tabs/assets/dpl-min.css,toolbar/assets/dpl-min.css,tree/assets/dpl-min.css" rel="stylesheet" type="text/css">
		<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy.js" charset="utf-8"></script>
		<script src="javascript/pagination.js"></script>
		<script src="dwr/interface/RecomService.js"></script>
		<script src="dwr/engine.js"></script>
		<script type="text/javascript">
			KISSY.getScript("http://l.tbcdn.cn/apps/top/x/sdk.js?appkey="+KISSY.Cookie.get("appkey"));
		</script>
		<script type="text/template" id="default-pagination-tpl"> 
        {{#! 显示首页 }}
        {{#if currentPage === startPage }}
        <a class="pg-prev pg-first pg-disabled" href="#">首页</a>
        {{#else}}
        <a class="pg-prev pg-first" href="#" data-page="{{ startPage }}">首页</a>
        {{/if}}
 
        {{#! 显示上一页 }}
        {{#if currentPage === startPage }}
        <a class="pg-prev pg-disabled">上一页</a>
        {{#else}}
        <a class="pg-prev" href="#" data-page="{{ currentPage - 1 }}">上一页</a>
        {{/if}}
 
        {{#if showPageNum }}
        {{#! 左边固定显示几页, 如固定显示 1 和 2 }}
        {{#if currentPage > startPage + alwaysDisplayCount - 1}}
        {{#for var i = 0; i < alwaysDisplayCount; i++ }}
        {{#! 避免后面重复显示 }}
        {{#if i + startPage < startIndex }}
        <a class="pg-page pg-item" href="#" data-page="{{ i + startPage }}">{{ i + startPage }}</a>
        {{/if}}
        {{/for}}
        {{/if}}
 
        {{#! 是否显示省略号 }}
        {{#if ellipseText && startIndex > startPage + alwaysDisplayCount }}
        <span class="pg-item">…</span>
        {{/if}}
 
        {{#! 显示页数 }}
        {{#for var i = startIndex; i <= endIndex; i++ }}
        {{#if currentPage !== i }}
        <a class="pg-page pg-item" href="#" data-page="{{ i }}">{{ i }}</a>
        {{#else}}
        <span class="pg-current pg-item">{{ i }}</span>
        {{/if}}
        {{/for}}
 
        {{#! 是否显示省略号 }}
        {{#if ellipseText && endIndex < endPage - alwaysDisplayCount }}
        <span class="pg-item">…</span>
        {{/if}}
 
        {{#! 右边固定显示几页 }}
        {{#if currentPage < endPage - alwaysDisplayCount + 1 }}
        {{#for var i = endPage - alwaysDisplayCount + 1; i <= endPage; i++ }}
        {{#if i > endIndex }}
        <a class="pg-page pg-item" href="#" data-page="{{ i }}">{{ i }}</a>
        {{/if}}
        {{/for}}
        {{/if}}
        {{/if}}
 
        {{#! 显示下一页 }}
        {{#if currentPage === endPage }}
        <a class="pg-next pg-disabled">下一页</a>
        {{#else}}
        <a class="pg-next" href="#" data-page="{{ currentPage + 1 }}">下一页</a>
        {{/if}}
 
        {{#! 显示末页 }}
        {{#if currentPage === endPage }}
        <a class="pg-next pg-last pg-disabled" href="#">末页</a>
        {{#else}}
        <a class="pg-next pg-last" href="#" data-page="{{ endPage }}">末页</a>
        {{/if}}
    </script>
	<script type="text/javascript">
		KISSY.use('dom,overlay',function(S, DOM, Overlay) {
			var $ = S.all;
			var dialog;
			RecomService.getPlan(function(data){
				if(data!=null){
					S.get("#sale").checked = (data.recomType==="sale");
					S.get("#itemCat").checked = (data.recomType==="itemCat");
					S.get("#item").checked = (data.recomType==="item");
					S.get("#down").checked = (data.recomMode==="down");
					S.get("#hot").checked = (data.recomMode==="hot");
					S.get("#key").checked = (data.recomMode==="key");
					S.get("#hasTime").checked = data.recomTime!=0;
					S.get("#recomTime").value = data.recomTime;
					S.get("#hasCount").checked = data.recomCount!=0;
					S.get("#recomCount").value = data.recomCount;
					S.get("#overSix").checked = data.overSix;
					if(S.get("#item").checked){
						$('#includeDetail').style('display','inline');
						$('#excludeDetail').style('display','inline');
						$('#saveRecom').text('下 一 步');
					}
					if(S.get("#itemCat").checked){
						$('#itemCatDetail').style('display','inline');
					}
				}
			});
			
			$("#sale").on('change',function(event){
				if(event.currentTarget.checked){
					$('#itemCatDetail').style('display','none');
					$('#includeDetail').style('display','none');
					$('#excludeDetail').style('display','none');
					$('#saveRecom').text('保存设置');
				}
			});
			
			$("#itemCat").on('change',function(event){
				if(event.currentTarget.checked){
					$('#itemCatDetail').style('display','inline');
					$('#includeDetail').style('display','none');
					$('#excludeDetail').style('display','none');
					$('#saveRecom').text('保存设置');
				}
			});
			
			$("#item").on('change',function(event){
				if(event.currentTarget.checked){
					$('#itemCatDetail').style('display','none');
					$('#includeDetail').style('display','inline');
					$('#excludeDetail').style('display','inline');
					$('#saveRecom').text('下 一 步');
				}
			});
			
			$("#itemCatDetail").on('click',function(event){
				event.stopPropagation?event.stopPropagation():event.cancelBubble=true;
				dialog = new Overlay.Popup({
	                elCls:"ks-popup-right",
	                content:'<div class="ks-popup-arrow"></div>'
	    				   +'<div name="popUp" class="ks-popup-inner">'
	        			   +	'<h3 name="popUp" class="ks-popup-title">请选择需要推荐的类目</h3>'
	        			   +	'<div name="popUp" class="ks-popup-content">'
	        			   +		'<label name="popUp" class="checkbox"><input name="popUp" type="checkbox"/>自定义类目一</label>'
	        			   +		'<label name="popUp" class="checkbox"><input name="popUp" type="checkbox"/>自定义类目二</label>'
	        			   +		'<label name="popUp" class="checkbox"><input name="popUp" type="checkbox"/>自定义类目三</label>'
	        			   +		'<label name="popUp" class="checkbox"><input name="popUp" type="checkbox"/>自定义类目四</label>'
	        			   +		'<label name="popUp" class="checkbox"><input name="popUp" type="checkbox"/>自定义类目四</label>'
	        			   +		'<label name="popUp" class="checkbox"><input name="popUp" type="checkbox"/>自定义类目四</label>'
	        			   +	'</div>'
	    				   +'</div>',
	                effect:{
	                    effect:"fade",
	                    duration:0.3
	                },
	                align:{
	                    node:'#itemCatDetail',
	                    points:['cr', 'cl']
	                }
	            });
				dialog.show();
				
	 			document.onclick = function(event){
	 				if(event.srcElement.getAttribute('name')!='popUp'){
    	    			dialog.hide();
    	    		}
			    };
			});
			
			//点击保存
			$("#saveRecom").on('click',function(event){
				if(event.currentTarget.innerHTML == '下 一 步'){
					$('.recom').style('display','none');
					parent.document.getElementById("content").height = 780;
					$('.recomItem').style('display','block');
				}
				else{
					var recom = new Object();
					recom.recomType = S.get("#sale").checked ? S.get("#sale").value : S.get("#itemCat").checked ? S.get("#itemCat").value : S.get("#item").value;
					recom.recomMode = S.get("#down").checked ? S.get("#down").value : S.get("#hot").checked ? S.get("#hot").value : S.get("#key").value;
					if(S.get("#hasTime").checked){
						recom.recomTime = S.get("#recomTime").value; 
					}
					if(S.get("#hasCount").checked){
						recom.recomCount = S.get("#recomCount").value; 
					}
					recom.overSix = S.get("#overSix").checked;
					RecomService.savePlan(recom);
				}
			});
		});
	</script>
	</head>
	<body>
		<!--主体内容-->
		<div id="content">
			<!-- 功能描述 -->
			<div style="padding: 20px 0px;">
				<div class="ks-popup-inner">
					<h3 class="ks-popup-title">自动橱窗</h3>
					<div class="ks-popup-content">
						<p>
							And here's some amazing content. It's very engaging. right?
						</p>
					</div>
				</div>
			</div>
			<!-- 自动橱窗 -->
			<div class="recom">
				<form class="form-horizontal">
					<dl>
						<dd>
							<fieldset>
								<legend>
									<h2>推荐范围</h2>
								</legend>
								<div class="control-group">
									<label class="radio">
										<input type="radio" id="sale" name="recomType" value="sale" checked="true">出售中的宝贝
									</label>
								</div>
								<div class="control-group">
									<label class="radio">
										<input type="radio" id="itemCat" name="recomType" value="itemCat">指定宝贝分类<a href="#" id="itemCatDetail" style="padding-left: 30px; display: none;">[选择宝贝类目]</a>
									</label>
								</div>
								<div class="control-group">
									<label class="radio">
										<input type="radio" id="item" name="recomType" value="item">指定宝贝推荐
										<a href="#" id="includeDetail" data="desc" class="showItem" style="padding-left: 30px; display: none;">[查看必推荐宝贝]</a>
										<a href="#" id="excludeDetail" data="asc" class="showItem" style="padding-left: 30px; display: none;">[查看不推荐宝贝]</a>
									</label>
								</div>
							</fieldset>
						</dd>
						<dt>
							<fieldset>
								<legend>
									<h2>推荐方式</h2>
								</legend>
								<div class="control-group">
									<label class="radio">
										<input type="radio" id="down" name="recomMode" value="down" checked="true">即将下架宝贝
									</label>
								</div>
								<div class="control-group">
									<label class="radio">
										<input type="radio" id="hot" name="recomMode" value="hot">店铺热销宝贝
									</label>
								</div>
								<div class="control-group" style="display: none;">
									<label class="radio">
										<input type="radio" id="key" name="recomMode" value="key">包含关键词宝贝
									</label>
								</div>
								<div class="control-group">
									<label class="checkbox">
										<input id="hasTime" type="checkbox" checked="true">不推荐<span style="padding-left: 50px;">分钟内就要下架的宝贝</span>
									</label>
									<input id="recomTime" type="text" size="2" value="15" style="position: absolute; margin-left: 58px; margin-top: -30px;">
									
									<label class="checkbox" style="padding-top: 8px">
										<input id="hasCount" type="checkbox" checked="true">不推荐所剩数量低于<span  style="padding-left: 50px;">件的宝贝</span>
									</label>
									<input id="recomCount" type="text" size="2" value="5" style="position: absolute; margin-left: 130px; margin-top: -30px;">
									
									<label class="checkbox" style="padding-top: 8px">
										<input id="overSix" type="checkbox" checked="true">强制取消剩余时间超过6天半的宝贝(勾选可防止出现系统推荐刚刚上架的宝贝)
									</label>
								</div>
							</fieldset>
						</dt>
					</dl>
					<div class="settig">
						<div id="saveRecom" class="ks-button ks-button-primary">保存设置</div>
						<div class="ks-button ks-button-primary">查看日志</div>
					</div>
				</form>
			</div>
			
			<!--显示商品-->
			<div class="recomItem" style="display: none;">
				<!-- 搜索 -->
				<div class="search">
					<form class="well form-search">
						<span>商品搜索：</span>
						<input id="searchTxt" type="text" class="input-medium search-query" placeholder="亲 ，输入宝贝的标题"/>
						<a href="#"><div class="ks-button" id="search" title="亲，可以根据关键词搜索出售中的商品哟！">搜索</div></a>
					</form>
				</div>
				<!-- 商品列表 -->
				<table class="table" id="items">
					<thead>
						<tr>
							<th width="40">图片</th>
							<th width="450">宝贝标题</th>
							<th width="40">价格</th>
							<th width="40">数量</th>
							<th width="70">橱窗推荐</th>
							<th width="150">下架时间</th>
							<th width="200">操作</th>
						</tr>
					</thead>
					<tbody class="page-content" id="recomItems"></tbody>
				</table>
				<!-- 分页 -->
				<div class="pagination" id="page" style="margin-right: 20px"></div>
				<div id="break" class="ks-button ks-button-primary" style="margin-top: -62px; margin-left: 20px">返回设置</div>
				<div id="savaData" class="ks-button ks-button-primary" style="margin-top: -62px; margin-left: 10px">保存设置</div>
				<script>
				Array.prototype.contains = function(obj){
					var i = this.length;
				 	while (i--){
						if (this[i].num_iid === obj.num_iid){
							return true;
						}
					}
					return false;
				}
				
				Array.prototype.get = function(obj){
					var i = this.length;
					var flag = true;
				 	while (i--){
						if (this[i].num_iid === obj.num_iid){
							return this[i];
							break;
						}
					}
					return null;
				}
				
				Array.prototype.add = function(obj){
					var i = this.length;
					var flag = true;
				 	while (i--){
						if (this[i].num_iid === obj.num_iid){
							flag = false;
							this[i] = obj;
							break;
						}
					}
					if(flag){
						this.push(obj);
					}
				}
				
				Array.prototype.remove = function(obj)
				{
				　　for(var i=0,n=0;i<this.length;i++)
				　　{
				　　　　if(this[i].num_iid != obj.num_iid)
				　　　　{
				　　　　　　this[n++]=this[i]
				　　　　}
				　　}
				　　this.length-=1;
				}
				KISSY.use('gallery/pagination/1.1/pagination',function(S, P) {
					var $ = S.all;
				   	var totalPage;
				   	var back = false;
				   	var beItem = new Array();		//已经存在数据
				   	var recomItems = new Array();	//要添加或修改的商品
				   	var removeItems = new Array();	//要删除的商品
				   	var itemList = new Array();		//数据库中存在的数据

				   	RecomService.getItem('desc',function(data){
						var numiids = data.numIids.substring(1,data.numIids.length-1);
						itemList = data.list;
						//获取数据库中记录
						TOP.api("tql","get",{ql:"select pic_url,title,num_iid,has_showcase,num,price,delist_time,outer_id from taobao.items.list.get where num_iids="+numiids,session:TOP.cookie.get("session")},function(response){
							beItem = beItem.concat(response.items_list_get_response.items.item);
						});
					   	searchItem("",'desc');
					});
					function searchItem(title,type)
					{
						pagination = null;
						//获取商品记录
						TOP.api("tql","get",{ql:"select num_iid from taobao.items.onsale.get where q="+title,session:TOP.cookie.get("session")},function(response){
							if(type=='asc' && !back){
								beItem = beItem.reverse();
								back = true;
							}
							else if(type=='desc' && back){
								beItem = beItem.reverse();
								back = false;
							}
							var items = new Array().concat(beItem);	//显示数据
							totalPage = response.items_onsale_get_response.total_results;
							//获取商品(待验证)
							TOP.api("tql","get",{ql:"select pic_url,title,num_iid,has_showcase,num,price,delist_time,outer_id from taobao.items.onsale.get where q="+ title +" and page_size=200 and page_no=1",session:TOP.cookie.get("session")},function(data){
								if(Math.ceil(totalPage/200)>1){
									for(var t=2;t<=Math.ceil(totalPage/200);t++){
										TOP.api("tql","get",{ql:"select pic_url,title,num_iid,has_showcase,num,price,delist_time,outer_id from taobao.items.onsale.get where q="+ title +" and page_size=200 and page_no="+t,session:TOP.cookie.get("session")},function(data){
											S.each(data.items_onsale_get_response.items.item,function(item){
												if(!beItem.contains(item)){
													items.push(item);
												}
											});
										});
									}
								}
								S.each(data.items_onsale_get_response.items.item,function(item){
									if(!beItem.contains(item)){
										items.push(item);
									}
								});
								
								var content = S.one('#recomItems'),
							    pagination = new P({
							        container: '#page',
							        template: S.one('#default-pagination-tpl').html(),
							        totalPage: Math.ceil(totalPage/8),
							        callback: function(idx, pg, ready) {
							            content.html('').addClass('loading');
							            var html = '';
							            for(var i=(idx-1)*8; i<idx*8 && i<items.length; i++){
							            	var system = "ks-button-primary";
							            	var must = "";
							            	var other = "";
							            	var temp = recomItems.get(items[i]);
							            	for(var j=0;itemList!=null&&j<itemList.length;j++){
							            		if(itemList[j].numIid === items[i].num_iid){
							            			if(itemList[j].state){
							            				system = "";
								            			must = "ks-button-primary";
								            			other = "";
							            			}
							            			else{
							            				system = "";
							            				must = "";
							            				other = "ks-button-primary";
							            			}
							            		}
							            	}
							            	if(temp){
							            		if(temp.state=="true"){
							            			system = "";
							            			must = "ks-button-primary";
							            			other = "";
							            		}
							            		else{
							            			system = "";
							            			must = "";
							            			other = "ks-button-primary";
							            		}
							            	}
							            	items[i].showcase = items[i].has_showcase? "已推荐":"未推荐";
						            		items[i].outer_id = items[i].outer_id? items[i].outer_id:items[i].num_iid;
											html += '<tr>'
								                   +    '<td style="padding-top: 8px;">'
								                   +        '<img src="'+items[i].pic_url+'_40x40.jpg" alt="'+items[i].title+'" width="40" height="40">'
								                   +    '</td>'
								                   +    '<td><a href="http://item.taobao.com/item.htm?id='+ items[i].num_iid +'" target="_blank">'+ items[i].title +'</a></td>'
								                   +    '<td>'+items[i].price+'</td>'
								                   +    '<td>'+items[i].num+'</td>'
								                   +    '<td>'+items[i].showcase+'</td>'
								                   +    '<td>'+items[i].delist_time+'</td>'
								                   +    '<td style="padding-top: 18px;">'
								                   +		'<div class="ks-button '+system+'" data="system" num_iid="'+ items[i].num_iid +'">系统</div>'
								                   +		'<div class="ks-button '+must+'" data="true" num_iid="'+ items[i].num_iid +'">必推</div>'
								                   +		'<div class="ks-button '+other+'" data="false" num_iid="'+ items[i].num_iid +'">不推</div>'
								                   +	'</td>'
								                   +'</tr>';
							            }
							            content.removeClass('loading').html(html);
						                ready(idx);
							            $("#recomItems .ks-button").on('click',function(e){
							            	$(e.currentTarget.parentElement.children).removeClass("ks-button-primary");
						                    $(e.currentTarget).addClass("ks-button-primary");
						                    var state = e.currentTarget.getAttribute('data');
						                    
						                    var recomItem = new Object();
						                    recomItem.numIid = parseInt(e.currentTarget.getAttribute('num_iid'));
						                    recomItem.num_iid = recomItem.numIid; 
						                    if(state=="system"){
						                    	if(beItem.contains(recomItem)){
						                    		removeItems.add(recomItem);
						                    	}
						                    	if(recomItems.contains(recomItem)){
						                    		recomItems.remove(recomItem);
						                    	}
						                    }
						                    else{
						                    	if(removeItems.contains(recomItem)){
						                    		removeItems.remove(recomItem);
						                    	}
						                    	recomItem.state = state;
						                    	recomItems.add(recomItem);
						                    }
							            });
							        }
							    });
							});
				    	});
					}
					//点击搜索
					$('#search').on('click', function(e) {
						if($('#searchTxt').val())
						{
							$('#search').text("全店商品");
						}
						else{
							$('#search').text("搜索");
						}
						searchItem($('#searchTxt').val());
						$('#searchTxt').val("");
					});
					//点击返回
					$('#break').on('click',function(event){
						$('.recomItem').style('display','none');
						parent.document.getElementById("content").height = 500;
						$('.recom').style('display','block');
					});
					//保存数据
					$('#savaData').on('click',function(event){
						var recom = new Object();
						recom.recomType = S.get("#sale").checked ? S.get("#sale").value : S.get("#itemCat").checked ? S.get("#itemCat").value : S.get("#item").value;
						recom.recomMode = S.get("#down").checked ? S.get("#down").value : S.get("#hot").checked ? S.get("#hot").value : S.get("#key").value;
						if(S.get("#hasTime").checked){
							recom.recomTime = S.get("#recomTime").value; 
						}
						if(S.get("#hasCount").checked){
							recom.recomCount = S.get("#recomCount").value; 
						}
						recom.overSix = S.get("#overSix").checked;
						RecomService.saveItem(recom,recomItems,removeItems);
					});
					//查看商品
					$(".showItem").on('click',function(event){
						$('.recom').style('display','none');
						parent.document.getElementById("content").height = 780;
						$('.recomItem').style('display','block');
						searchItem('',event.currentTarget.getAttribute('data'));
					});
				});
				</script> 
			</div>
		</div>
	</body>
</html>
